// 1. 引入
import Vue from 'vue'
import Vuex from 'vuex'

import user from './modules/user'
import setting from './modules/setting'

// 2. 注册使用
Vue.use(Vuex)

// 3. 创建仓库对象
const store = new Vuex.Store({
  // 开启严格模式
  // 注意: 上线后要关闭严格模式
  // 因为开启严格模式是会消耗性能的
  strict: true,
  /**
   核心模块1: 存储所有需要共享的数据
  */
  state: {
    count: 100,
    title: '大标题',
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
  /**
   核心模块2: 提供了所有修改state中数据的方法
   注意点:
   1) state中的所有数据只能通过mutations对象中的方法去修改
   2) mutations对象中的所有方法第一个参数就是state
   */
  mutations: {
    // 方法中, 只能通过一个形参接收数据
    // 如果要传递多个数据, 可以包装成一个对象或者数组
    addCount (state, obj) {
      console.log(obj)
      state.count += obj.num
    },
    subCount (state, num) {
      state.count -= num
    },
    changeCount (state, num) {
      state.count = num
    }
  },
  /**
   核心模块3: 用于提供各种方法, 多数是异步操作的方法
   注意点:
   在actions中的方法可以通过context提交mutation去修改state中的数据
   */
  actions: {
    // context 当前作用域环境下的上下文, 代表当前仓库
    setAsyncCount (context, num) {
      // 模拟异步操作
      setTimeout(() => {
        // 提交mutations
        context.commit('changeCount', num)
      }, 1000)
    }
  },
  /**
   核心模块4: 此处提供针对state中数据的派生用法
   - 里面方法的第一个参数是state
   - 里面方法必须要有返回值
   */
  getters: {
    filterList (state) {
      return state.list.filter(item => item >= 5)
    }
  },
  /**
   核心模块5: 用于放置所有的子模块
   */
  modules: {
    user,
    setting
  }
})

// 4. 导出仓库
export default store
